<template>
	<div>
		<router-link  
			tag='div'
			class="detail-list" 
			v-for='item of RandList' 
			:key='item._id'
			:class="{ detail_list_active: DetailAct == item._id }"
			@touchstart.native='videoDetailTouchstart(item._id)'
			@touchend.native='videoDetailTouchend()'
			:to="'/VideoDetail/' + item._id"
		>
			<div class="l-l">
				<p class="list-title">
					{{item.v_title}}
				</p>
				<p class="list-author">
					{{item.v_user}}
					{{item.v_comm}}
				</p>
			</div>
			<div class="l-r">
				<div class="l-r-top">
					<img class="l-r-top-img" :src="item.v_img" />
				</div>
			</div>
		</router-link>
	</div>
</template>

<script>
	import axios from  'axios'
	export default {
		name: 'detail-list',
		props: {
			RandList: Array
		},
		data () {
			return {
				DetailAct: ''
			}
		},
		methods: {
			videoDetailTouchstart (detail_xb) {
				this.DetailAct = detail_xb
			},
			videoDetailTouchend () {
				this.DetailAct = false
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~stylus/minxins.styl'
	.detail-list
		border-bottom:1px #F0F0F0 solid
		background:#fff
		padding:6px 0 0px 0
		flexRow()
	.detail-list:last-child
		margin-bottom:0
	.l-l
		width:502px
		overflow:hidden
		.list-title
			color:#494949
			font-size:32px
			margin:30px 0 0 22px
			line-height:44px
			-webkit-line-clamp: 2
			textClamp()
		.list-author
			margin:24px 0 30px 22px
			color:#aaa
			font-size:24px
	.l-r
		width:246px
		position:relative	
		.l-r-top
			width:200px
			margin-top:32px
			float:right
			margin-right:24px	
			.l-r-top-img
				width:100%
		.l-r-bottom
			padding:2px 10px
			border:2px #308ee3 solid
			border-radius:4px
			color:#308ee3
			position:absolute
			right:28px
			bottom:22px
			text-align:center
			line-height:40px
			background:#fff
			font-size:22px
	.detail_list_active
		background-color:#F1F1F1
</style>
